<template>
	<view class='newclass'>
	  <view class="header" :class="{'borderShow':borderShow}" :style="{height:titleBarHeight+bottomHeight+'px',paddingTop:statusBarHeight+'px',background:background}">
			<image class="topBg" :src="defaultImg" mode="" v-if="defaultImg"></image>
	   <view class="header_title" :class="textLeft?'textL':'textC'" :style="{color:titleColor,height:titleBarHeight+'px','padding-left':titlePaddingL}" v-if="!titleSlot">{{title}}</view>
		 <view class="header_title" :class="textLeft?'textL':'textC'" :style="{color:titleColor,height:titleBarHeight+'px',}" v-else>
			<slot name="titleSlot"></slot>
		 </view>
		<view v-if="showIcon" class="title_bar" :style="{height:titleBarHeight+'px',paddingTop: statusBarHeight+'px'}" @click="goBack()">
		  <view class='goBack_icon' :style="{'border-color':titleColor}"></view>
		</view>
		<view class="header_bottom" id="kerHeaderBottom" style="width: 100%;">
			<slot name="bottom"></slot>
		</view>
	  </view>
	  <view :style="{height:titleBarHeight+bottomHeight+'px',paddingTop:statusBarHeight+'px','box-sizing':'content-box'}" v-if="usePlace"></view>
	</view>
</template>

<script>
	
	/**
	 * @description 自定义导航   page.json中navigationStyle  需先设置为 "custom"
	 * @property {String} title 导航栏标题
	 * @property {Boolean} textLeft 标题居左还是居中，默认居中
	 * @property {String} titlePaddingL   如果标题居左，这个属性为距离页面左边的距离
	 * @property {String} titleColor  标题文字颜色
	 * @property {Boolean} titleSlot  标题栏是否采用自定义  默认为false。如需使用自定义标题（如改为搜索框），此值需设置为true
	 * @property {Boolean} showIcon 是否显示返回按钮
	 * @property {String} background  导航栏背景色
	 * @property {String} defaultImg  导航栏背景图片
	 * @property {Boolean} borderShow  是否显示导航栏底部边框  默认不显示
	 * @property {Boolean} usePlace 页面导航栏外的内容区，是否顶格
	*/
 
	export default {
		props:{
			title: {
			  type: String,
			  default: ''
			},
			// 标题居左还是居中，默认居中
			textLeft:{
				type: Boolean,
				default: false
			},
			// 返回按钮
			showIcon: {
			  type: Boolean,
			  default: true
			},
			// 导航背景色
			background:{
				type: String,
				default: '#fff'
			},
			titleColor:{
				type:String,
				default:'#333'
			},
			borderShow:{
				type:Boolean,
				default:false
			},
			//不显示标题时，自定义标题内容（如搜索框），设置为true
			titleSlot:{
				type:Boolean,
				default:false
			},
			// 内容是否顶格,即是否有顶部占位
			usePlace:{
				type:Boolean,
				default:true
			},
			// 如果标题居左，这个属性为距离页面左边的距离
			titlePaddingL:{
				type:String,
				default:'0rpx'
			},
			// 导航栏背景图片  		:defaultImg="img"
			defaultImg: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				 statusBarHeight: 0,
				 titleBarHeight: 44,
				 bottomHeight: 0
			}
		},
		mounted(){
			// #ifndef H5
			const { statusBarHeight, titleBarHeight} = this.getNavafateHeight();
			this.statusBarHeight = statusBarHeight;
			this.titleBarHeight = titleBarHeight;
			let query = uni.createSelectorQuery().in(this);
			query.select(".header_bottom").boundingClientRect(rect => {
				this.bottomHeight = rect.height;
				this.$emit('cb', {
					sh: this.statusBarHeight,
					th: this.titleBarHeight,
					bh: this.bottomHeight
				})
			}).exec();
			// #endif
			// #ifdef H5
			this.bottomHeight = document.getElementById('kerHeaderBottom').offsetHeight;
			this.$emit('cb', {
				sh: this.statusBarHeight,
				th: this.titleBarHeight,
				bh: this.bottomHeight
			})
			// #endif
		},
		methods: {
			/* 获取手机头部状态栏和标题高度 */
			getNavafateHeight(){
			  // 获取状态栏高度
			  const { statusBarHeight } = uni.getSystemInfoSync();
			  const menuButtonObject = uni.getMenuButtonBoundingClientRect();
			  const { top, height } = menuButtonObject;
			  const navBarHeight = height + (top - statusBarHeight) * 2;
			  return { statusBarHeight:statusBarHeight, titleBarHeight:navBarHeight}
			},
			goBack(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		top: 0;
		left: 0;
		position: fixed;
		width: 100%;
		z-index: 99;
		box-sizing: content-box;
		.topBg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}
	}
	.borderShow::after{
		content: '';
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 1px;
		background: #dbdbdb;
		transform: scaleY(0.5);
	}
	.header_title {
	  width: 100%;
	  display: flex;
	   box-sizing: border-box;
	   align-items: center;
	  font-size: 30rpx;
	  color: #ffffff;
		z-index: 2;
	}
	// .header-img {
	// 	position: absolute;
	// 	left: 0;
	// 	top: 0;
	// 	height: 100%;
	// 	width: 100%;
	// 	z-index: -1;
	// 	overflow: hidden;
	// 	.img {
	// 		display: block;
	// 		width: 100%;
	// 		height: 100%;
	// 	}
	// }
	.textL{
		justify-content: flex-start;
		padding-left:30rpx;
		padding-right: 30rpx;
	}	

	.textC{
		justify-content: center;
	}
	.header .line {
		border-left: 1rpx solid #f6f6f6;
		height: 36rpx;
	}
	.header .back, .header .home {
		width: 40%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.title_bar{
		position: absolute;
		left: 0;
		top: 0;
		z-index: 2;
		padding: 0 40rpx;
		display: flex;
		align-items: center;
		box-sizing: content-box;
	}
	.goBack_icon{
		width: 10px;
		height: 10px;
		border-top: 2px solid #ffffff;
		border-left: 2px solid #ffffff;
		transform: rotate(-45deg);
		will-change: transform;
	}
	.header_bottom {
		position: relative;
		z-index: 1;
	}
</style>
